<template>
    <view>
        <div class="flow-table-container">
            <!-- 检索区域 -->
            <div class="search-area">
                <div class="search-item">
                    <a-input :style="{ minWidth: '240px' }" placeholder="关键词检索(名称/编码)" allow-clear :max-length="16">
                        <template #prefix> <icon-search /> </template>
                    </a-input>
                </div>
                <div class="btns-list">
                    <!-- <a-button style="width: 120px;" @click="onNewFlowBtnClick()">新建分组</a-button> -->
                    <a-button style="width: 120px;" type="primary" @click="toCreate()">
                        新建定义

                        <template #icon> <icon-plus /> </template>
                    </a-button>
                </div>
            </div>
            <div class="flow-table-main">

                <div class="flow-table-content">
                    <AntdZh>
                        <a-table bordered :columns="columns" :data-source="tableData" :loading="tableLoading"
                            :pagination="false" @change="handleTableChange">
                            <template #bodyCell="{ column, record, index }">
                                <template v-if="column.dataIndex === 'status'">
                                    <!--执行状态-->
                                    <a-tag color="green" v-if="record.status">启用</a-tag>
                                    <a-tag color="red" v-else>停用</a-tag>

                                </template>
                                <template v-else-if="column.dataIndex === 'flowGroup'">
                                    <!--执行状态-->
                                    <view v-if="record.flowGroup">
                                        {{ record.flowGroup }}
                                    </view>
                                    <view v-else>
                                        DEFAULT
                                    </view>
                                </template>
                                <template v-else-if="column.dataIndex === 'flowDefine'">
                                    <a-popover title="流程定义">
                                        <template #content>
                                            <JsonEditor style="width: 400px;" v-model:value="record.flowDefine"
                                                readOnly>
                                            </JsonEditor>
                                        </template>
                                        <CodeOutlined style="color:black;font-size: 24px;"></CodeOutlined>
                                    </a-popover>
                                </template>
                                <template v-if="column.dataIndex === 'action'">
                                    <a-row>
                                        <a-col :span="12">
                                            <a-tooltip>
                                                <template #title>修改信息</template>
                                                <view>
                                                    <a-button type="link" @click="handleUpdate(record.id)">
                                                        <FormOutlined />
                                                    </a-button>
                                                </view>
                                            </a-tooltip>
                                        </a-col>
                                        <a-col :span="12">
                                            <a-popconfirm title="是否删除该流程 ?" @confirm="handleDelete(record.id)">
                                                <a-tooltip>
                                                    <template #title>流程删除</template>
                                                    <view>
                                                        <a-button type="link">
                                                            <DeleteOutlined style="color: #f5222d;" />
                                                        </a-button>
                                                    </view>
                                                </a-tooltip>
                                            </a-popconfirm>

                                        </a-col>
                                    </a-row>
                                </template>
                            </template>
                        </a-table>
                    </AntdZh>

                </div>
                <div class="fenye" v-if="query.total > 0">
                    <a-pagination show-total @change="reqData()" :total="query.total" v-model:page-size="query.pageSize"
                        v-model:current="query.pageNum" />
                </div>
            </div>
        </div>

    </view>
</template>

<script setup>

import useApp from '@/hooks';
const { $ } = useApp();
import { useFlowStore } from "@/stores/index";
const flow = useFlowStore();
import { SafetyOutlined, FormOutlined, KeyOutlined, PlusOutlined, DeleteOutlined, DesktopOutlined, SyncOutlined, CodeOutlined } from '@ant-design/icons-vue';
import { Table as ATable, Button as AButton, Tooltip as ATooltip, Popconfirm as APopconfirm } from "ant-design-vue";
import { IconSearch, IconPlus, IconDelete, IconEdit, IconStop, IconCheckCircle } from "@arco-design/web-vue/es/icon";
import { columns } from './flow-define';
import DefineApi from "@/api/FlowDefine";
import { NODE } from '@/components/flow/common/FlowConstant';
const tableData = ref([])
const tableLoading = ref(false)
const query = ref({
    total: 0,
    pageSize: 10,
    pageNum: 1,
    groups: []
})
const groups = ref([]);
// 跳转新建
function toCreate() {
    let flowDef = {
        nodeConfig: { id: 'start', name: "发起", type: NODE.START, childNode: null, assignees: [{ assignType: 'ALL' }] }
    };
    // 重置
    flow.reset();
    flow.nodeConfig = flowDef.nodeConfig;
    // console.log(flowStore.nodeConfig)
    $.navigateTo({
        url: '/flowmanedit'
    })
}
// 执行更新
function handleUpdate(id) {
    DefineApi.queryOne(id).then(res => {
        console.log(res)
        flow.id = res.id;
        flow.flowName = res.flowName;
        flow.flowCode = res.flowCode;
        flow.description = res.description;
        flow.flowGroup = res.flowGroup;
        flow.flowIcon = res.flowIcon;
        if ($.isNotEmpty(res.flowWidgets)) {
            flow.flowWidgets = JSON.parse(res.flowWidgets);
        }else{
            flow.flowWidgets = [];
        }
        flow.nodeList = res.nodeList;
        if ($.isNotEmpty(res.flowDefine) && res.flowDefine !== '{}') {
            flow.nodeConfig = JSON.parse(res.flowDefine);
        } else {
            let flowDef = {
                nodeConfig: { id: 'start', name: "发起", type: NODE.START, childNode: null, assignees: [{ assignType: 'ALL' }] }
            };
            flow.nodeConfig = flowDef.nodeConfig;
        }

        $.navigateTo({
            url: '/flowmanedit'
        })
            ;
    })
}
// 删除
function handleDelete(id) {
    deleteOne(id).then(res => {
        reqData();
    })
}
function handleTableChange(page, filters, sorted) {
    query.value.pageNum = 1;
    // 获取 status
    // 状态
    var status = filters.status;
    if ($.isNotEmpty(status)) {
        query.value.status = status[0];
    } else {
        query.value.status = null
    }
    // 构建
    var flowGroup = filters.flowGroup;
    if ($.isNotEmpty(flowGroup)) {
        query.value.groups = flowGroup;
    } else {
        query.value.groups = null;
    }
    reqData();
}
function reqData() {
    tableLoading.value = true;
    DefineApi.queryList(query.value).then(res => {
        console.log(res.content)
        tableLoading.value = false;
        tableData.value = res.content;
        query.value.total = res.totalElements;
    })
}
// 获取分组
function reqGroups() {
    DefineApi.listGroups().then(res => {
        console.log(res)
        // 构建选择
        let groupOptions = res.map(ele => {
            let obj = {
                text: ele,
                value: ele
            }
            return obj;
        })
        columns[0].filters = groupOptions;
    })
}
reqGroups();
reqData();
</script>

<style lang="less">
@import "@/styles/ftable.less";
</style>